<template>
  <el-dialog
    title="新增设备"
    :visible.sync="dialogFormVisible"
    :show-close="false"
  >
    <el-form :model="form" :rules="rulesForm" ref="form" label-width="380px">
      <p>设备编号 ： 系统自动生成</p>

      <el-form-item
        prop="xinghao1"
        label="选择型号："
        :label-width="formLabelWidth"
      >
        <el-select v-model="form.name" placeholder="请选择">
          <el-option
            v-for="(item, index) in xinghao"
            :key="index"
            :label="item"
            :value="item"
            class="option"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        prop="dianwei1"
        label="选择点位："
        :label-width="formLabelWidth"
      >
        <el-select v-model="form.region" placeholder="请选择">
          <el-option
            v-for="(item, index) in dianwei"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancle" class="btn11">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisibleFn" class="btn22"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { addshouhuoji, getsearchList } from '@/api/fixing/fixing'

import { mapState } from 'vuex'
export default {
  props: ['name', 'region', 'dianwei', 'xinghao', 'dianweilist', 'xinghaolist'],
  // 测试
  created () {},
  // 测试
  data () {
    return {
      formLabelWidth: '120px',
      form: {
        xinghao: '',
        dianwei: '',
        name: '',
        region: ''
      },
      rulesForm: {
        xinghao1: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        dianwei1: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }

      // dialogTableVisible: this.dialogTableVisible,
      // dialogFormVisible: false,
    }
  },
  methods: {
    async dialogFormVisibleFn () {
      const nodeId = this.dianweilist.find(
        (item) => item.name === this.form.region
      ).id
      const vmType = this.xinghaolist.find(
        (item) => item.name === this.form.name
      ).typeId
      console.log(nodeId)
      console.log(vmType)
      //  this.form.resetFields()
      await addshouhuoji({
        vmType: Number(vmType),
        nodeId: nodeId,
        createUserId: 1
      })
      this.$message.success('添加成功！')
      this.cancle()
      const data = await getsearchList({
        pageIndex: '',
        pageSize: 10
      })
      // console.log(data.data.currentPageRecords);
      const list = await data.data.currentPageRecords.map((item, index) => {
        return {
          num: index + 1,
          number: item.innerCode,
          model: item.type?.name ? item.type.name : '未知',
          address: item.node?.name ? item.node.name : '未知',
          partners: item.ownerName ? item.ownerName : '未知',
          state:
            item.vmStatus === 1
              ? '运营'
              : '' || item.vmStatus === 0
                ? '未投放'
                : '' || item.vmStatus === 3
                  ? '撤机'
                  : ''
        }
      })

      this.$emit('updatalist', list)
    },

    cancle () {
      this.$store.commit('fixing/DiaLogIsfalse')
      this.form.name = ''
      this.form.region = ''
    }
  },
  computed: {
    ...mapState('fixing', ['dialogFormVisible'])
  }
}
</script>

<style lang="less" scoped>
p {
  margin-left: 35px;
  margin-bottom: 30px;
}
.btn11 {
  background-color: #fbf4f0 !important;
  border: none;
}
.btn11:hover {
  color: #606266;
}
.btn22 {
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: none;
}
::v-deep .el-dialog__footer {
  text-align: center;
  .el-button.el-button--primary {
    margin-left: 40px;
  }
}

::v-deep .el-dialog {
  width: 40%;
}
::v-deep .el-input {
  width: 200%;
}
</style>
